<!--
 * @Descripttion: 
 * @Author: yizheng.yuan
 * @Date: 2021-05-23 14:58:15
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-05-23 16:42:27
-->
<html>
  <head>
    <title>js的学习</title>
    <style>
      .tab-title span{
        display: inline-block;
        background: #eee;
        padding: 5px 10px;
        margin-left: 10px;
      }
    </style>
  </head>

  <body>
    <button onclick="btnFun()">隐藏/显示</button>
    <p id="content">你好！</p>

    <div style="border: 1px solid red; margin: 20px; width: 500px; height: 200px;">
      <p class="tab-title">
        <span>页面1</span>
        <span>页面2</span>
      </p>
      <div id="main">
        <div>页面1内容</div>
        <div style="display: none;">页面2内容</div>
      </div>
    </div>

    <script>
      // js代码要写在<script>标签里面
      let flag = true;
      function btnFun(){
        console.log('点击了');
        
        var content = document.getElementById('content');
        if(flag){
          flag = false;
          content.style.display = 'none';
        }else{
          flag = true;
          content.style.display = 'block';
        }
      }

      // tab页面
      // 前端入门到工作，分享5年前端工作经历，讲解一个前端如何从菜鸟到大神要经历的过程，清晰的学习路线，丰富的学习资料，有效的学习方法。
      let allT = document.getElementsByClassName('tab-title')[0];
      console.log('allT',allT);
      let allSpan = allT.getElementsByTagName('span');

      // 获取页面的内容
      let mainId = document.getElementById('main')
      let allDiv = mainId.getElementsByTagName('div')

      // 每点击一个span就会有一个事件
      for(let i=0;i<allSpan.length;i++){
        allSpan[i].onclick=function(){
          // 每次点击时，将所有页面先隐藏
          for(let j=0;j<allDiv.length;j++){
            allDiv[j].style.display = 'none';
          }
          console.log('点击了',i);
          allDiv[i].style.display = 'block';
        }
      }


    </script>

  </body>
</html>